﻿@page "/dropdowns"
@inject IStringLocalizer<Dropdowns> Localizer

<h3>@Localizer["Title"]</h3>

<h4>@Localizer["H1"]</h4>

<DemoBlock Title="@Localizer["Block1Title"]" Introduction="@Localizer["Block1Intro"]" Name="Normal">
    <Dropdown TValue="string" Items="Items" OnSelectedItemChanged="@ShowMessage" Color="Color.Secondary"></Dropdown>
    <BlockLogger @ref="Trace" class="mt-3" />
</DemoBlock>

<DemoBlock Title="@Localizer["Block2Title"]" Introduction="@Localizer["Block2Intro"]" Name="Null">
    <Dropdown TValue="string" Items="EmptyList" OnSelectedItemChanged="@ShowMessage" Color="Color.Secondary"></Dropdown>
</DemoBlock>

<DemoBlock Title="@Localizer["Block3Title"]" Introduction='@Localizer["Block3Intro"]' Name="Color">
    <div class="row g-3">
        <div class="col-6 col-sm-4 col-md-3"><Dropdown TValue="string" Items="Items" Color="Color.Primary"></Dropdown></div>
        <div class="col-6 col-sm-4 col-md-3"><Dropdown TValue="string" Items="Items" Color="Color.Info"></Dropdown></div>
        <div class="col-6 col-sm-4 col-md-3"><Dropdown TValue="string" Items="Items" Color="Color.Warning"></Dropdown></div>
        <div class="col-6 col-sm-4 col-md-3"><Dropdown TValue="string" Items="Items" Color="Color.Danger"></Dropdown></div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["Block4Title"]" Introduction='@Localizer["Block4Intro"]' Name="Split">
    <div class="row g-3">
        <div class="col-6 col-sm-4 col-md-3"><Dropdown TValue="string" DropdownType="DropdownType.ButtonGroup" Items="Items" ShowSplit="true" Color="Color.Primary"></Dropdown></div>
        <div class="col-6 col-sm-4 col-md-3"><Dropdown TValue="string" DropdownType="DropdownType.ButtonGroup" Items="Items" ShowSplit="true" Color="Color.Info"></Dropdown></div>
        <div class="col-6 col-sm-4 col-md-3"><Dropdown TValue="string" DropdownType="DropdownType.ButtonGroup" Items="Items" ShowSplit="true" Color="Color.Warning"></Dropdown></div>
        <div class="col-6 col-sm-4 col-md-3"><Dropdown TValue="string" DropdownType="DropdownType.ButtonGroup" Items="Items" ShowSplit="true" Color="Color.Danger"></Dropdown></div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["Block5Title"]" Introduction="@Localizer["Block5Intro"]" Name="Size">
    <div class="row g-3">
        <div class="col-6 col-sm-4 col-md-3 col-xl-auto"><Dropdown TValue="string" Items="Items" Size="Size.ExtraSmall"></Dropdown></div>
        <div class="col-6 col-sm-4 col-md-3 col-xl-auto"><Dropdown TValue="string" Items="Items" Size="Size.Small"></Dropdown></div>
        <div class="col-6 col-sm-4 col-md-3 col-xl-auto"><Dropdown TValue="string" Items="Items" Size="Size.Medium"></Dropdown></div>
        <div class="col-6 col-sm-4 col-md-3 col-xl-auto"><Dropdown TValue="string" Items="Items" Size="Size.Large"></Dropdown></div>
        <div class="col-6 col-sm-4 col-md-3 col-xl-auto"><Dropdown TValue="string" Items="Items" Size="Size.ExtraLarge"></Dropdown></div>
        <div class="col-6 col-sm-4 col-md-3 col-xl-auto"><Dropdown TValue="string" Items="Items" Size="Size.ExtraExtraLarge"></Dropdown></div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["Block6Title"]" Introduction='@Localizer["Block6Intro"]' Name="Direction">
    <div class="row form-inline form-inline-end g-3">
        <div class="col-6 col-sm-4 col-md-3"><Dropdown TValue="string" Items="Items" Direction="Direction.Dropleft" ShowLabel="true" DisplayText="Start"></Dropdown></div>
        <div class="col-6 col-sm-4 col-md-3"><Dropdown TValue="string" Items="Items" Direction="Direction.Dropright" ShowLabel="true" DisplayText="End"></Dropdown></div>
        <div class="col-6 col-sm-4 col-md-3"><Dropdown TValue="string" Items="Items" Direction="Direction.Dropup" ShowLabel="true" DisplayText="Up"></Dropdown></div>
        <div class="col-6 col-sm-4 col-md-3"><Dropdown TValue="string" Items="Items" Direction="Direction.Dropdown" ShowLabel="true" DisplayText="Down"></Dropdown></div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["Block7Title"]" Introduction='@Localizer["Block7Title"]' Name="Alignment">
    <div class="row form-inline form-inline-end g-3">
        <div class="col-6 col-sm-4 col-md-3"><Dropdown TValue="string" Items="Items" Color="Color.Secondary" MenuAlignment="Alignment.Left" Direction="Direction.Dropdown" ShowLabel="true" DisplayText="Start"></Dropdown></div>
        <div class="col-6 col-sm-4 col-md-3"><Dropdown TValue="string" Items="Items" Color="Color.Secondary" MenuAlignment="Alignment.Right" Direction="Direction.Dropdown" ShowLabel="true" DisplayText="End"></Dropdown></div>
        <div class="col-6 col-sm-4 col-md-3"><Dropdown TValue="string" Items="Items" Color="Color.Secondary" MenuAlignment="Alignment.Center" Direction="Direction.Dropdown" ShowLabel="true" DisplayText="Center"></Dropdown></div>
        <div class="col-6 col-sm-4 col-md-3"><Dropdown TValue="string" Items="Items" Color="Color.Secondary" MenuAlignment="Alignment.Center" Direction="Direction.Dropup" ShowLabel="true" DisplayText="Center"></Dropdown></div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["Block8Title"]" Introduction='@Localizer["Block8Intro"]' Name="Items">
    <div class="row">
        <div class="col-12 col-sm-6">
            <Dropdown TValue="string" Items="@Foos">
            </Dropdown>
        </div>
        <div class="col-12 col-sm-6">
            <Button @onclick="@AddItem">@Localizer["Button1Text"]</Button>
            <Button @onclick="@RemoveItem" Color="Color.Danger">@Localizer["Button2Text"]</Button>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["Block9Title"]" Introduction="@Localizer["Block9Intro"]" Name="Radio">
    <div class="row g-3">
        <div class="col-12">
            <RadioList TValue="SelectedItem" Items="@RadioItems" OnSelectedChanged="@OnRadioItemChanged">
            </RadioList>
        </div>
        <div class="col-12">
            <Dropdown TValue="string" Items="@RadioDropDownItems">
            </Dropdown>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["Block10Title"]" Introduction="@Localizer["Block10Intro"]" Name="Cascade">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <Dropdown TValue="string" Items="Items3" OnSelectedItemChanged="OnCascadeBindSelectClick" />
        </div>
        <div class="col-12 col-sm-6">
            <Dropdown TValue="string" Items="Items2" />
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["IsFixedButtonTextTitle"]" Introduction="@Localizer["IsFixedButtonTextIntro"]" Name="IsFixedButtonText">
    <Dropdown TValue="string" Items="RadioItems" IsFixedButtonText="true" />
</DemoBlock>

<DemoBlock Title="@Localizer["FixedButtonTextTitle"]" Introduction="@Localizer["FixedButtonTextIntro"]" Name="FixedButtonText">
    <Dropdown TValue="string" Items="RadioItems" IsFixedButtonText="true" FixedButtonText="@Localizer["FixedButtonTextCity"]"></Dropdown>
</DemoBlock>

<AttributeTable Items="@GetAttributes()" />

<EventTable Items="@GetEvents()" />
